<template>
  <div class="container">
    <el-row>
      <el-form ref="searchform" :model="form" size="small">
        <el-col :span="3">
          <el-form-item prop="client_type">
            <el-select
              v-model="form.client_type"
              placeholder="请选择客户端类型"
              style="width: 95%"
              clearable
            >
              <el-option
                :label="item.lable"
                :value="item.id"
                v-for="(item, index) in updataOptions"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item prop="keyWord">
            <el-input
              placeholder="请输入关键字"
              clearable
              v-model="form.keyWord"
              style="width: 95%"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <div class="rightbtn">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="searchlist"
            class="marginL"
            >查询
          </el-button>
          <el-button icon="el-icon-refresh-left" size="small" @click="resetform"
            >重置</el-button
          >
        </div>
      </el-form>
    </el-row>
    <el-row>
      <el-button
        type="primary"
        size="small"
        @click="addItem"
        >添加</el-button
      >
    </el-row>
    <el-row>
      <el-table
        :data="tableData"
        border
        style="width: 100%; margin-top: 20px"
        size="small"
      >
        <el-table-column prop="app_name" label="客户端名称" show-overflow-tooltip />
        <el-table-column prop="client_type" label="客户端类型" show-overflow-tooltip />
        <el-table-column prop="version_name" label="版本名称" show-overflow-tooltip />
        <el-table-column prop="version_code" label="版本号" show-overflow-tooltip />
      
        <el-table-column prop="update_info" label="更新内容" show-overflow-tooltip width="200px"/>
        <el-table-column prop="app_url" label="安装包下载地址" show-overflow-tooltip width="300px"/>

        <el-table-column prop="is_must" label="是否必要更新" show-overflow-tooltip>
          <template slot="header" slot-scope="scope">
                  <span>是否必要更新</span>
                  <el-tooltip
                    style="margin-left: 10px"
                    effect="dark"
                    content="必要更新时：企业端将在用户登录时弹出相关更新信息，APP端将强制用户进行版本更新"
                    placement="top"
                  >
                    <i class="el-icon-question"></i>
                  </el-tooltip>
                </template>
          <template slot-scope="scope">
            <el-switch
              class="switch"
              v-model="scope.row.is_must"
              @change="changestatus(scope.row)"
              :active-value="1"
              :inactive-value="0"
              active-text="是"
              inactive-text="否"
            ></el-switch>
          </template>
        </el-table-column>
  <el-table-column prop="create_time" label="提交时间" show-overflow-tooltip />
        <el-table-column prop="update_time" label="更新时间" show-overflow-tooltip />
        <el-table-column prop="date" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              @click="editItem(scope.row)"
           
              >编辑</el-button
            >
            <el-button
              type="text"
              @click="deleteTableItem(scope.row)"
         
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24" class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-sizes="[10, 20]"
            :page-size="10"
            background
            :current-page.sync="page"
            layout="total, sizes, prev, pager, next"
            :total="pagination.total"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-row>
    <!-- 弹框 -->
    <subdialog
      :isshowDialog="isshowDialog"
      :dialogTitle="dialogTitle"
      :formType="formtype"
      :cityoptions="cityoptions"
      :areaoptions="areaoptions"
      @confirm="confirm"
      @closedialog="closedialog"
      :dialogdata="dialogdata"
    ></subdialog>
  </div>
</template>

<script type="text/javascript">
import checkPermission from "@/utils/permission"; // 权限判断函数
import {
  clientversion,
  clientversionRead,
  clientversionDelete,
  updateismust,
} from "@/api/clientVersion";
import { commonGetCity, userOption } from "@/api/examplace";
import subdialog from "./components/dialog";
export default {
  data() {
    return {
      isshowDialog: false,
      dialogTitle: "新增",
      formtype: 0,
      page: 1,
      rows: 10,
      form: {
        client_type: "",
        keyWord: "",
      },
      tableData: [],
      category: [],
      pagination: {},
      dialogdata: null,
      cityoptions: [],
      areaoptions: [],
      updateUserOptions: [],
      updataOptions: [
        { lable: "安卓", id: "android" },
        { lable: "iOS", id: "ios" },
        { lable: "企业端", id: "enterprise" },
      ],
    };
  },
  components: {
    subdialog,
  },
  created() {
    this.getData();
  },
  methods: {
    checkPermission,
    handleSizeChange(val) {
      this.rows = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    searchlist() {
      this.page = 1;
      this.getData();
    },
    resetform() {
      this.$refs["searchform"].resetFields();
      this.getData();
    },


    //详情
    async getquestionRead(id) {
      let data = await clientversionRead({ id: id });
      this.dialogdata = data.data;
    },
    //切换类型
    async changestatus(val) {
      let is_must = val.is_must == 0 ? 1 : 0;
      let params = {
        id: val.id,
        is_must: is_must,
      };
      let data = await updateismust(params);
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message: data.msg,
        });
        this.getData();
      }
    },
    //新增
    addItem() {
      this.isshowDialog = true;
      this.dialogTitle = "新增";
      this.formtype = 0;
    },
    //编辑
    editItem(val) {
      this.isshowDialog = true;
      this.dialogTitle = "编辑";
      this.formtype = 1;
      this.getquestionRead(val.id);
    },
    //删除
    async deleteTableItem(val) {
      let data = await clientversionDelete({ id: val.id });
      if (data.code == "0000") {
        this.$message({
          type: "success",
          message: data.msg,
        });
        this.getData();
      }
    },

    //提交成功
    confirm() {
      this.isshowDialog = false;
      this.getData();
    },
    closedialog() {
      this.isshowDialog = false;
    },
    //获取列表
    async getData() {
      let params = {
        page: this.page,
        rows: this.rows,
      };
      if (this.form.keyWord) {
        params.keyword = this.form.keyWord;
      }
      if (this.form.client_type) {
        params.client_type = this.form.client_type;
      }
  
      let data = await clientversion(params);
      console.log(data);
      let datainfo = data.data;
      this.tableData = datainfo.list;
      this.pagination = datainfo.page;
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
</style>
